<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{ count }}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected: selectedType === 'all'}" @click="changeType('all')" href="javascript:;">全部</a>
			</li>
			<li>
				<a :class="{selected: selectedType === 'active'}" @click="changeType('active')" href="javascript:;">未完成</a>
			</li>
			<li>
				<a :class="{selected: selectedType === 'complete'}" @click="changeType('complete')" href="javascript:;">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" @click="clearFun">清除已完成</button>
	</footer>
</template>

<script>
	export default {
    data(){
      return {
        selectedType:'all'
      }
    },
    computed:{
     count() {
      return this.arr.filter(item=>!item.isDone).length
     }
    },
    methods:{
       clearFun(){ // 清除已完成
         this.$emit('clear')
        },
          //高亮效果
  changeType(type) {
 this.selectedType=type
 this.$emit('changeType',type)
}
    },
 props: ['arr'],
	}
</script>
